<script setup>
const props = defineProps({
  currentStep: {
    type: Number,
    required: false,
  },
  checkoutData: {
    type: null,
    required: true,
  },
})

const emit = defineEmits(["update:currentStep", "update:checkout-data"])

const checkoutCartDataLocal = ref(props.checkoutData)

const removeItem = item => {
  checkoutCartDataLocal.value.cartItems =
      checkoutCartDataLocal.value.cartItems.filter(i => i.id !== item.id)
  console.log(checkoutCartDataLocal.value.cartItems)
}

//  cart total
const totalCost = computed(() => {
  return (checkoutCartDataLocal.value.orderAmount =
      checkoutCartDataLocal.value.cartItems.reduce((acc, item) => {
        return acc + item.price * item.quantity
      }, 0))
})

const updateCartData = () => {
  emit("update:checkout-data", checkoutCartDataLocal.value)
}

const nextStep = () => {
  updateCartData()
  emit("update:currentStep", props.currentStep ? props.currentStep + 1 : 1)
}

watch(() => props.currentStep, updateCartData)
</script>

<template>
  <VRow v-if="checkoutCartDataLocal">
    <VCol
      cols="12"
      md="12"
    />
  </VRow>
</template>

<style lang="scss" scoped>
  .checkout-item-remove-btn {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
  }
</style>
